<template>
	<div>
		<el-dialog
			title="配置角色"
			:visible.sync="dialogVisible"
			width="40%"
			:before-close="handleClose"
			@close="DialdgClose"
		>
			<div>
				<p>当前用户：{{userinfo.username}}</p>
				<p>当前角色：{{userinfo.rolename}}</p>
				<p>
					分配新角色：
					<el-select v-model="value" clearable placeholder="请选择">
						<el-option v-for="item in roleLists" :key="item.value" :label="item.lable" :value="item.value"></el-option>
						
					</el-select>
				</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="allotRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		userid: {
			type: parseInt,
			default: 0
		}
	},
	data() {
		return {
			userinfo: {
				username: '',
				rolename: ''
			},
			roleLists: [],
			value: ''
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		getUserRole() {
			this.$get('/api/User/GetUserRole', {
				userId: this.userid
			})
				.then(res => {
					if (res.code == 0) {
						console.log(res.data)
						this.userinfo.username = res.data.username
						this.userinfo.rolename = res.data.rolename
					} else {
						this.$message.error(res.msg)
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		getRoleList() {
			this.$get('/api/Role/GetRoles', {})
				.then(res => {
					if (res.code == 0) {
						
						this.roleLists = res.data
						console.log(this.roleLists)
					} else {
						this.$message.error(res.msg)
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		//分配角色
		allotRole() {
			console.log(this.value)
			if (this.value == null || this.value == '') {
				this.$message.error('请选择角色')
				return
			}
			console.log(this.value)
			this.$post('/api/User/AllotRole', {
				userid: this.userid,
				rolecode: this.value
			})
				.then(res => {
					if (res.code == 0) {
						this.$message({
							message: res.msg,
							type: 'success'
						})
						this.dialogVisible = false
					} else {
						this.$message.error(res.msg)
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		DialdgClose() {
			this.userinfo.username = ''
			this.userinfo.rolename = ''
			this.roleList = []
			this.value = ''
		}
	},
	watch: {
		dialogVisible: function(val) {
			const data = {
				IsShow: val
			}
			if (val == true) {
				this.getUserRole()
				this.getRoleList()
			}
			this.$emit('IsShowAllotRole', data)
		}
	}
}
</script>